<script setup lang="ts">
const mainStore = useMainStore();

const svg: Ref<String> = ref('');

onMounted(async () => {
    const data: String =  await $fetch('api/getSvg');

    svg.value = data;
})
</script>

<template>
    <div :class="[$style.mainWrapper, 'all_page']">
        <div :class="$style.section_1">
            <Header />
        </div>

        <div :class="$style.section_2">
            <SvgStackBuilder />

            <div :class="[$style.viewPort, 'center_flex']">
                <div v-html="svg" :class="[$style.chartWrapper, 'center_flex']"></div>
            </div>

            <TransitionGroup name="fadeRight" tag="div">
                <div v-if="mainStore.chosenEntityType === 'block'" :class="$style.blockSetting">
                    <h2 :style="{ borderBottom: '1px solid black' }">Дабавить:</h2>
                    <div :class="$style.svgElements">
                        <el-button round @click="() => mainStore.addChartToBlock(mainStore.chosenBlock)">График</el-button>
                    </div>
                </div>
            </TransitionGroup>
        </div>
    </div>
</template>

<style module>
.mainWrapper {
    --main-color: #94c798;
    --main-opacity-color: #f3f3f3;
    --top-height: 75px;

    display: flex;
    flex-direction: column;
}

.section_1 {
    width: 100%;
    height: var(--top-height);
    min-height: var(--top-height);
    box-shadow: 0px 1px 5px #aaaaaa;
    z-index: 3;
}

.section_2 {
    position: relative;

    flex-grow: 1;
    display: flex;
    flex-direction: row;

    overflow: hidden;
}

.viewPort {
    flex-grow: 1;
    background-size: 20px 20px;
    background-image:
        linear-gradient(to right, #d6d6d6 1px, transparent 1px),
        linear-gradient(to bottom, #d6d6d6 1px, transparent 1px);
}

.chartWrapper {
    background-color: white;
    border: 1px solid black;
}

.blockSetting {
    position: absolute;
    width: 300px;
    height: 100%;
    padding: 10px 20px;

    left: 300px;
    background-color: white;
    z-index: 1;
}

.svgElements {
    display: flex;
    flex-direction: column;
}

.svgElements > button {
    width: 100%;
}
</style>